<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14_map</title>
</head>

<body>
  <script>
    /**
     * map()
     * 语法: 数组.map( function(item, index, arr) {})
     *    => 函数可以接受三个参数
     *    => 第一个参数: 表示数组内的每一项
     *    => 第二个参数: 表示数组内的每一项的索引
     *    => 第三个参数: 表示原始数组
     * 作用: 映射数组
     * 返回值: 
     *    => 是一个新数组, 并且和原始数组长度一致
     *    => 新数组内每一个数据都是根据原始数组中每一个数据映射出来的
     *    => 映射条件以 return 的形式书写
    */


    var arr = [100, 200, 300, 400, 500];
    console.log('原始数组:', arr);

    // 开始映射
    var result = arr.map(function a(item) {
      // 以 return 的形式书写映射条件
      return item * 10;
    })
    console.log('返回值:', result);


    /**
     * map 的原理
     *    1. 准备了一个空数组
     *      => [1000, 2000, 3000, 4000, 5000]
     *    2. 开始根据原始数据进行遍历
     *      => 第一次调用 a(100, 0, 原始数据), 返回值是 1000, 把这个返回值放在新数组里面
     *      => 第二次调用 a(200, 1, 原始数据), 返回值是 2000, 把这个返回值放在新数组里面
     *      => 第三次调用 a(300, 2, 原始数据), 返回值是 3000, 把这个返回值放在新数组里面
     *      => ...
     *    3. 把 最终的这个数组当做 map 这个方法的返回值
     * 
    */

  </script>
</body>

</html>
